<template>
	<div id="app">
		<router-view />
	</div>
</template>

<script>
	import axios from "axios";
	import {
		mapActions
	} from "vuex";
	import {
		getTDK
	} from "@/api/data";
	export default {
		data() {
			return {
				title: "",
				Keywords: "",
				description: "",
			};
		},
		created() {
			if (this.$store.state.user.token && !this.$store.state.user.getBaseInfo) {
				this.getUserData();
				this.getAmountData();
			}
			// this.getTDK();
		},
		mounted() {
			this.getVersion();
			setInterval(() => {
				this.getVersion();
			}, 5000);
		},
		methods: {
			...mapActions(["getUserData", "getAmountData"]),
			async getTDK() {
				let res = await getTDK();
				if (res.code == 200) {
					let info = res.data.filter((item) => item.id == 10)
				}
			},
			getVersion() {
				let url = `//${window.location.host}/version.json`;
				if (process.env.NODE_ENV === 'production') {
					axios.get(url).then((res) => {
						let lastVersion = res.data.version;
						if (localStorage.version == undefined) {
							localStorage.setItem('version', lastVersion);
						} else {
							if (localStorage.version != lastVersion) {
								localStorage.removeItem('version');
								this.$Modal.confirm({
									title: '提示',
									content: "<p>检测到版本更新，刷新页面</p>",
									onOk: () => {
										window.location.reload();
									},
								});
							}
						}
					});
				}
			}
		},
	};
</script>

<style lang="scss">
	.user-main-box {
		background-color: #fff;
		padding: 15px;
	}

	.filter-line {
		min-height: 48px;
		padding-right: 10px;

		.item-name {
			font-size: 14px;
			color: #000;
			flex-shrink: 0;
      min-width: 100px;
      text-align: right;
			&::after {
				content: "：";
				margin-right: 10px;
			}
		}
    .select-item:last-child {
      margin-right: 0;
    }
		.select-item {
			width: 120px;
			height: 28px;
			font-size: 14px;
			transition: color 0.3s;
			border-radius: 4px;
			display: flex;
			align-items: center;
			justify-content: center;
			cursor: pointer;
			flex-shrink: 1;
      margin-right: 15px;
			&.normal {
				border: 1px solid #e4e6fa;
				color: #000;
			}
      &.normal:last-child {
        margin-right: 0;
      }
			&.active,
			&:hover {
				border-color: $mainColor;
				@include h-c($mainColor, null, #fff, #fff);
			}
		}
	}

	.search-result-line {
		min-height: 48px;
		// padding-bottom: 30px;
	}

	.search-icon-btn {
		@include size(38px);
		border-radius: 4px;
		@include bg-setting("search", 22px, center);
	}

	.b-b-d {
		border-bottom: 1px solid #e4e6fa;
	}

	.b-b-s {
		border-bottom: 1px solid #eaeaea;
	}

	.two-input-middle {
		width: 20px;
		border-top: rgba($color: #898989, $alpha: 0.4) solid 1px;
		margin: 0 10px;
	}

	.line-button-size {
		min-width: 90px;
		height: 32px;
		@include btn-s(0 15px, 32px, 4px);
	}

	.form-button-size {
		height: 26px;
		min-width: 60px;
		@include btn-s(0 10px, 24px, 4px);
	}

	.form-line-button-size {
		height: 32px;
		min-width: 60px;
		@include btn-s(0 10px, 30px, 4px);
	}

	.submit-button-style {
		@include size(126px, 40px);
		@include btn-s(null, 40px, 5px);
	}

	.submit-button-style-first {
		margin-left: 115px;
	}

	.form-font-button {
		@include h-c(null, null, $mainColor, $color-main-8);
		font-size: 14px;
		margin: 0 5px;
		cursor: pointer;
	}

	.b-form-font-button {
		@include h-c(null, null, #1c9cdf, rgba(#1c9cdf, 0.8));
		font-size: 14px;
		margin: 0 5px;
		cursor: pointer;
	}

	.form-input-area {
		padding: 30px 40px 60px;

		.div-line {
			margin-bottom: 20px;
		}
	}

	.long-name {
		min-width: 115px;
		margin-right: 30px;
		font-size: 14px;
		line-height: 32px;
		color: #000;
    text-align: right;
		&::after {
			content: ":";
		}
	}

	.long-name-nece {
		&::after {
			content: "★";
			font-size: 12px;
			color: #f2632c;
			margin-left: 10px;
		}
	}

	.long-name-nece-before {
		&::before {
			content: "★";
			font-size: 12px;
			color: #f2632c;
			margin-right: 10px;
		}
	}

	.radio-mg-r-20 {
		margin-right: 20px !important;
	}

	.code-img-area {
		@include size(80px, 30px);
		background-color: #f6f6f6;
	}

	.ivu-checkbox {
		margin-right: 7px;
	}

	.tips-area {
		padding: 10px 20px 10px 20px;
		border: $color-main solid 1px;
		// background-color: $color-main;
		color: $mainColor;
		border-radius: 8px;
		font-weight: bold;
	}

	.tips-icon {
		@include bg-setting("tips-icon", 20px 20px, 15px 10px);
	}

	.tips-icon-2 {
		@include bg-setting("warming", 20px 20px, 15px 10px);
	}

	.user-ma-list-item {
		height: 70px;
		background-color: #f6f7f9;
		padding: 0 16px 0 56px;
		margin-bottom: 20px;
		@include bg-setting(null, 24px 24px, 14px center);
		transition: background-color 0.3s, box-shadow 0.3s;

		&:hover {
			background-color: #fff;
			box-shadow: 0 2px 12px 0 rgba(#000, 0.1);
		}

		&.s-l-1 {
			background-image: url("~_a/images/s-l-1@2x.png");
		}

		&.s-l-2 {
			background-image: url("~_a/images/s-l-2@2x.png");
		}

		&.s-l-3 {
			background-image: url("~_a/images/s-l-3@2x.png");
		}

		&.s-l-4 {
			background-image: url("~_a/images/s-l-4@2x.png");
		}
	}

	.dmTextarea {
		background: #fff !important;
		display: inline-block;
		border: 1px solid #e4e6fa;
		height: 32px;
		line-height: 22px;
		padding: 4px 7px;
		font-size: 14px;
		border-radius: 5px;
		color: #515a6e;
		background-image: none;
		cursor: pointer;
		transition: border 0.2s ease-in-out, background 0.2s ease-in-out,
			box-shadow 0.2s ease-in-out;
	}

	.dmTyping {
		height: 180px;
		background: #fff;
		color: #515a6e;
		border: 1px solid $mainColor;
	}
</style>
